<template>
  <el-card style="margin-bottom: 20px">
    <div slot="header" class="clearfix">
      <span>项目信息</span>
    </div>

    <div class="user-profile">
      <div class="box-center">
        <el-avatar size="large" style="width: 80px; height: 80px; line-height: 80px; font-size: 40px" :style="randomRgb(id)">
          {{ data.projectName?.charAt(0) }}
        </el-avatar>
      </div>
      <div class="box-center user-name">{{ data.projectName }}</div>
      <div class="box-center user-name text-muted">
        {{ data.costNumber }}
        <el-tag
          size="mini"
          effect="dark"
          :color="
            data.deviceType == 1
              ? '#1e90ff'
              : data.deviceType == 2
              ? '#6b8e23'
              : data.deviceType == 3
              ? '#7b68ee'
              : data.deviceType == 4
              ? '#32cd32'
              : data.deviceType == 5
              ? '#ff00ff'
              : data.deviceType == 6
              ? '#3cb371'
              : data.deviceType == 7
              ? '#b8860b'
              : data.deviceType == 8
              ? '#ffa500'
              : '#6495ed'
          "
        >
          {{
            data.deviceType == 1
              ? '夹具化成'
              : data.deviceType == 2
              ? '夹具分容'
              : data.deviceType == 3
              ? 'DCR'
              : data.deviceType == 4
              ? 'OCV'
              : data.deviceType == 5
              ? 'LPM'
              : data.deviceType == 6
              ? '分选机'
              : data.deviceType == 7
              ? '仪器'
              : data.deviceType == 8
              ? '化成分容一体机'
              : ''
          }}
        </el-tag>
        <el-tag size="mini" type="info">{{ data.year + '年' }}</el-tag>
      </div>
    </div>

    <div class="user-bio">
      <!-- <div class="user-education user-bio-section">
        <div class="user-bio-section-header">
          <svg-icon icon-class="education" />
          <span>项目介绍</span>
        </div>
        <div class="user-bio-section-body">
          <div class="text-muted">暂无</div>
        </div>
      </div> -->
      <div class="user-education user-bio-section">
        <div class="user-bio-section-header">
          <svg-icon icon-class="education" />
          <span>项目配置</span>
        </div>
        <div class="user-bio-section-body">
          <el-descriptions class="margin-top" :column="2" direction="vertical" border>
            <el-descriptions-item label="驱动箱类型">
              <b>{{ data.drive_box_type ? data.drive_box_type : '-' }}</b>
            </el-descriptions-item>
            <el-descriptions-item label="设备数量">
              <b>{{ data.devices_number ? data.devices_number + '台' : '-' }}</b>
            </el-descriptions-item>
            <el-descriptions-item label="单台治具数量/通道" :span="2">
              <b>{{ data.fixtures_channels ? data.fixtures_channels : '-' }}</b>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>

      <div class="user-education user-bio-section">
        <div class="user-bio-section-header">
          <svg-icon icon-class="education" />
          <span>主要人员</span>
        </div>
        <div class="user-bio-section-body">
          <el-descriptions class="margin-top" :column="3" direction="vertical" border>
            <el-descriptions-item label="所属部门">
              <b>{{ data.department ? data.department : '-' }}</b>
            </el-descriptions-item>
            <el-descriptions-item label="项目担当">
              <b>{{ data.project_manager ? data.project_manager : '-' }}</b>
            </el-descriptions-item>
            <el-descriptions-item label="软件主负责">
              <b>{{ data.software_main_manager ? data.software_main_manager : '-' }}</b>
            </el-descriptions-item>
            <el-descriptions-item label="软件负责人">
              <b>{{ data.software_manager ? data.software_manager : '-' }}</b>
            </el-descriptions-item>
            <el-descriptions-item label="充放电负责人">
              <b>{{ data.charge_discharge_manager ? data.charge_discharge_manager : '-' }}</b>
            </el-descriptions-item>
            <el-descriptions-item label="视觉负责人">
              <b>{{ data.visual_director ? data.visual_director : '-' }}</b>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>

      <div class="user-skills user-bio-section">
        <div class="user-bio-section-header">
          <svg-icon icon-class="skill" />
          <span>项目进度</span>
        </div>
        <div class="user-bio-section-body">
          <el-descriptions class="margin-top" :column="2" direction="vertical" border>
            <el-descriptions-item label="厂内项目目前情况">
              <el-tag size="small" type="warning" v-if="data.factory_situation">
                {{ data.factory_situation ? data.factory_situation : '-' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="现场客户现场情况">
              <el-tag size="small" type="success" v-if="data.customer_situation">
                {{ data.customer_situation ? data.customer_situation : '-' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="厂内FAT时间">{{ data.factory_fat_time ? data.factory_fat_time : '-' }}</el-descriptions-item>
            <el-descriptions-item label="设备发货时间">{{ data.delivery_time ? data.delivery_time : '-' }}</el-descriptions-item>
            <el-descriptions-item label="客户现场FAT时间">
              {{ data.customer_fat_time ? data.customer_fat_time : '-' }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
  import { getProjectById } from '@/api/wordOrder'

  export default {
    props: {},
    data() {
      return {
        data: {},
        id: this.$route.query.id,
        user: {},
        activeTab: 'activity',
      }
    },
    created() {
      this.getProjectById()
    },
    methods: {
      async getProjectById() {
        const { data } = await getProjectById({ id: this.id })
        this.data = data
      },
      randomRgb(id) {
        let colorArry = [
          '#ff7f50',
          '#87cefa',
          '#da70d6',
          '#6495ed',
          '#ff69b4',
          '#ba55d3',
          '#cd5c5c',
          '#ffa500',
          '#40e0d0',
          '#1e90ff',
          '#ff6347',
          '#7b68ee',
          '#00fa9a',
          '#ffd700',
          '#6b8e23',
          '#ff00ff',
          '#3cb371',
          '#b8860b',
          '#30e0e0',
        ]
        return {
          background: colorArry[parseInt(id % 10)],
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .box-center {
    margin: 0 auto;
    display: table;
  }

  .text-muted {
    color: #777;
  }

  .user-profile {
    .user-name {
      font-weight: bold;
    }

    .box-center {
      padding-top: 10px;
    }

    .user-role {
      padding-top: 10px;
      font-weight: 400;
      font-size: 14px;
    }

    .box-social {
      padding-top: 30px;

      .el-table {
        border-top: 1px solid #dfe6ec;
      }
    }

    .user-follow {
      padding-top: 20px;
    }
  }

  .user-bio {
    margin-top: 20px;
    color: #606266;

    span {
      padding-left: 4px;
    }

    .user-bio-section {
      font-size: 14px;
      padding: 15px 0;

      .user-bio-section-header {
        border-bottom: 1px solid #dfe6ec;
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-weight: bold;
      }
    }
  }
</style>
